<template>
  <el-row :gutter="10" style="width: 1200px;margin: 0 auto">
<!--  3:1   3+1=4   24/4 =6   3*6:1*6  -->
   <el-col :span="18">
     <el-card>
       <h1 style="color: orange;text-align: center">
         {{content.title}}</h1>
       <p style="font-size: 12px;color: #666;text-align: center">
         作者: {{content.nickname}} | 发布时间:{{content.createTime}}
         | 阅读次数: {{content.viewCount}}
       </p>
       <hr>
       <div v-if="content.type!=2">
         <el-card>
           <span style="color: #0aa1ed;font-weight: bold">摘要:</span>
           {{content.brief}}
         </el-card>
         <p  v-html="content.content"></p>
       </div>
      <div v-else>
        <video :src="'http://localhost:8080'+content.videoUrl"
        controls type="video/mp4" style="width: 100%"></video>
      </div>
     </el-card>
<!--   评论相关开始  -->
     <el-card style="margin-top:10px">
       <p>发一条友善的评论</p>
       <hr>
       <el-row :gutter="10">
        <el-col :span="22">
          <el-input v-model="comment.content" placeholder="说点儿啥..."></el-input>
        </el-col>
        <el-col :span="2"><el-button @click="post()">发布</el-button></el-col>
       </el-row>
       <el-row :gutter="10" v-for="item in commentArr">
        <el-col :span="2">
          <el-avatar style="margin: 10px"
                     :src="'http://localhost:8080'+item.userImgUrl"></el-avatar>
        </el-col>
        <el-col :span="22">
          <p style="color: orange;font-weight: bold;margin: 0">{{item.nickname}}</p>
          <p style="margin: 0">{{item.content}}</p>
          <p style="font-size: 12px;color: #666;margin:0">{{item.createTime}}</p>
        </el-col>
       </el-row>
     </el-card>
<!--   评论相关结束  -->
   </el-col>
   <el-col :span="6">
     <el-card>
       <div id="head_div"></div>
       <div style="text-align:center;position: relative;bottom: 45px">
         <el-avatar style="border:5px solid white" :size="90"
                    :src="'http://localhost:8080'+content.userImgUrl"></el-avatar>
         <p style="font-size: 20px;font-weight: bold;margin: 0">{{content.nickname}}</p>
         <el-icon><Edit/></el-icon> 本文作者<br>
         <el-icon><Clock/></el-icon> {{content.createTime}}
       </div>
     </el-card>

     <el-card style="margin-top:10px">
       <h2>作者其它文章</h2>
       <hr>
       <el-row :gutter="10" v-for="item in otherArr">
        <el-col :span="10">
          <router-link :to="'/detail?id='+item.id">
            <img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%">
          </router-link>
        </el-col>
        <el-col :span="14">
          <router-link :to="'/detail?id='+item.id">
            <p class="title_p">{{item.title}}</p>
          </router-link>
          <p style="color: #666;font-size: 12px;margin: 0">{{item.createTime}}</p>
        </el-col>
       </el-row>
     </el-card>

     <el-card style="margin-top:10px">
       <h2>热门文章</h2>
       <hr>
       <el-row :gutter="10" v-for="item in hotArr">
         <el-col :span="10">
           <router-link :to="'/detail?id='+item.id">
            <img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%">
           </router-link>
         </el-col>
         <el-col :span="14">
<!--       javascript:void(0)禁用超链接跳转功能    -->
           <a href="javascript:void(0)" @click="detail(item.id)">
           <p class="title_p">{{item.title}}</p>
           </a>
           <p style="color: #666;font-size: 12px;margin: 0">{{item.createTime}}</p>
         </el-col>
       </el-row>
     </el-card>
   </el-col>
  </el-row>
</template>

<script setup>
import {onBeforeUpdate, onMounted, ref} from "vue";
  import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

  const content = ref({});
  const otherArr = ref([]);
  const hotArr = ref([]);
  const comment = ref({content:''});
  const commentArr = ref([]);
  const loadComments = (id)=>{
    axios.get('http://localhost:8080/v1/comments/'+id)
    .then((response)=>{
      if (response.data.code==2001){
        commentArr.value = response.data.data;
      }
    })
  }


  const post=()=>{
    let user = localStorage.user?JSON.parse(localStorage.user):null;
    if (user==null){
      alert("请先登录!")
      return;
    }
    comment.value.userId = user.id; //作者id
    comment.value.contentId = content.value.id; //文章id
    let data = qs.stringify(comment.value);
    axios.post('http://localhost:8080/v1/comments/add-new',data)
    .then((response)=>{
      if (response.data.code==2001){
        ElMessage.success("评论完成!");
        comment.value.content='';//清空评论框的内容
        //加载评论列表
        loadComments(content.value.id);
      }
    })
  }
  const detail = (id)=>{
    axios.get('http://localhost:8080/v1/contents/'+id+'/detail')
        .then((response)=>{
          if (response.data.code==2001){
            content.value = response.data.data;
            //请求作者其它文章
            axios.get('http://localhost:8080/v1/contents/'
                +content.value.userId+'/other').then((response)=>{
              if (response.data.code==2001){
                otherArr.value = response.data.data;
              }
            })

          }
        })
  }
  const initData = ()=>{

    //请求热门文章
    axios.get('http://localhost:8080/v1/contents/hot')
        .then((response)=>{
          if (response.data.code==2001){
            hotArr.value = response.data.data;
          }
        })
    let id = new URLSearchParams(location.search).get('id');
    //查询评论列表
    loadComments(id);
    axios.get('http://localhost:8080/v1/contents/'+id+'/detail')
        .then((response)=>{
          if (response.data.code==2001){
            content.value = response.data.data;
            //请求作者其它文章
            axios.get('http://localhost:8080/v1/contents/'
                +content.value.userId+'/other').then((response)=>{
              if (response.data.code==2001){
                otherArr.value = response.data.data;
              }
            })

          }
        })
  }

  //当A->B时不执行  A->A执行
  onBeforeUpdate(()=>{
    initData();
  })

  //当A->B时执行  A->A不执行
  onMounted(()=>{
    initData();

  })
</script>

<style scoped>
  .title_p{
    height: 40px;
    margin-top: 0;
    overflow: hidden;
    /*设置超出部分用省略号展示*/
    display: -webkit-box;
    -webkit-line-clamp:2;/*设置显示的行数*/
    -webkit-box-orient: vertical; /*纵向排列*/
  }
  #head_div{
    height: 90px;
    background-image: url("/public/imgs/avarbg.jpg");
  }
  a{
    text-decoration: none;
    color: #333;
  }
  a:hover{color: orange}
</style>